<template>
  <div v-if="!this.$store.state.isLogin">
    <!-- 顶部 -->
    <van-nav-bar title="我的收货地址"
                 left-arrow
                 @click-left="onClickLeft" />
    <van-empty image="network"
               description="您好像还没有登录？" />
    <div class="btnBox">
      <van-button round
                  type="danger"
                  class="bottom-button"
                  to="/accountsign">去登录</van-button>
    </div>
  </div>
  <div v-else>
    <!-- 顶部 -->
    <van-nav-bar title="我的收货地址"
                 left-arrow
                 @click-left="onClickLeft" />
    <!-- 现有的收货地址 -->
    <van-address-list v-model="chosenAddressId"
                      :list="list"
                      :disabled-list="disabledList"
                      disabled-text="以下地址为展示模板"
                      default-tag-text="默认"
                      @add="onAdd"
                      @edit="onEdit"
                      @select="selectAddress" />
    <van-empty image="search"
               description="收货地址为空"
               v-if="empty" />
    <!-- 遮罩层 -->
    <van-overlay :show="show"
                 @click="show = false" />
    <!-- 编辑收货地址 -->
    <div class="editAddress"
         v-show="show">
      <div class="whiteBox">
        <van-address-edit :area-list="areaList"
                          :show-postal="false"
                          show-delete
                          show-set-default
                          show-search-result
                          :search-result="searchResult"
                          :area-columns-placeholder="['请选择', '请选择', '请选择']"
                          @save="onSave"
                          @delete="onDelete"
                          @change-detail="onChangeDetail" />
      </div>
    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data';
export default {
  name: 'AddressList',
  data() {
    return {
      empty: true,
      isAdd: false,
      editIndex: 0,
      areaList,
      show: false,
      searchResult: [],
      chosenAddressId: '1',
      list: [],
      disabledList: [
        {
          id: '3',
          name: 'Mr.拜登',
          tel: '1－800－333－4636',
          address: '美国阿拉巴马州阿拉伯 FryGapRd ArabMeatMarket杂货店',
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onAdd() {
      this.show = true
      this.isAdd = true
    },
    onEdit(item, index) {
      // console.log(item);
      this.editIndex = index
      this.show = true
    },
    onSave(content) {
      this.empty = false
      this.show = false
      this.$store.state.cannotSubmit = false
      // console.log(content);
      let address;
      if (content.province == content.city) {
        address = '' + content.city + content.county + content.addressDetail
      } else {
        address = '' + content.province + content.city + content.county + content.addressDetail
      }
      if (this.isAdd) {
        if (this.list.length == 0) {
          content.isDefault = true
        }
        this.list.push({
          id: this.list.length + 1,
          name: content.name,
          tel: content.tel,
          address,
          isDefault: content.isDefault
        })
        this.isAdd = false
        this.list.forEach((element, index) => {
          if (content.isDefault) {
            if (index + 2 == this.list.length + 1) {
              this.chosenAddressId = element.id
              this.$store.state.mineAddress = element
            } else {
              element.isDefault = false
            }
          }
        })
        // this.$set(this.list, this.list.length-1, this.list[this.list.length - 1])
      } else {
        this.list.forEach((element, index) => {
          if (index == this.editIndex) {
            element.address = address
            element.tel = content.tel
            element.name = content.name
            element.isDefault = content.isDefault
            if (content.isDefault) {
              this.$store.state.mineAddress = element
              this.chosenAddressId = element.id
            }
          } else {
            if (content.isDefault) {
              element.isDefault = false
            }
          }
        })
      }
      localStorage.setItem('addressList', JSON.stringify(this.list))
    },
    onDelete() {
      this.list.forEach((element, index) => {
        if (index == this.editIndex) {
          this.list.splice(this.editIndex, 1)
          if (element.isDefault) {
            if (this.list.length != 0) {
              this.list[0].isDefault = true
              this.chosenAddressId = this.list[0].id
              this.$store.state.mineAddress = this.list[0]
            } else {
              this.$store.state.mineAddress = {}
              this.empty = true
            }
          }
        }
      })
      this.show = false
      localStorage.setItem('addressList', JSON.stringify(this.list))
    },
    selectAddress(item) {
      console.log(item);
      item.isDefault = true
      this.list.forEach((val) => {
        if (val.id != item.id) {
          val.isDefault = false
        }
      })
      this.$store.state.mineAddress = item
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '666号楼',
            address: '方大科技园',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
  created() {
    if (JSON.parse(localStorage.getItem('addressList')) && JSON.parse(localStorage.getItem('addressList')).length != 0) {
      this.empty = false
      this.list = JSON.parse(localStorage.getItem('addressList'))
      this.list.forEach((val) => {
        if (val.isDefault) {
          this.chosenAddressId = val.id
          this.$store.state.mineAddress = val
        }
      })
    }
  },
}

</script>

<style lang='less' scoped>
/deep/.van-empty__description {
  font-size: 18px;
}
/deep/.van-nav-bar__title {
  font-weight: 600;
}
/deep/.van-nav-bar__content {
  height: 45px;
}
.editAddress {
  position: fixed;
  top: 20%;
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
  .whiteBox {
    width: 88%;
    background-color: #fff;
    border-radius: 15px;
  }
}
.btnBox {
  text-align: center;
}
.bottom-button {
  width: 80%;
  height: 40px;
}
/deep/.van-empty {
  padding: 100px 0;
}
</style>